/**
 * React样式的使用
 * 1、类样式的使用
 * 使用步骤
 * 第1步：在src创建一个assets文件夹,这个文件夹中创建style文件夹
 * 第2步：编写css样式文件
 * 第3步：引入
 * import '样式文件位置'
 * 第4步：直接在要引入的标签中使用className="样式的类名称"
 * 2、引入本地图片
 * 本地图片可以存放到两个位置public、src/assets/images中
 * 3、引入src/assets下的图片需要有两种方式
 * 1）通过ES6的import方式引入
 * 2）通过Node.jsde
 * 4、引入public文件夹下的图片，需要直接使用/的方式进行引入
 */
import './assets/style/index.css'
import ReactDOM from "react-dom/client";
import boy from './assets/images/boy.png'
const root = ReactDOM.createRoot(document.querySelector("#root"));

//定义一个数组
const students = [
  {
    sid: "1001",
    sname: "张三",
    age: 24,
    telephone: "13326765432",
    address: "西安市凤城1路100号",
    status: 1,
    checked:true,
    avatar:'/girl.png'
  },
  {
    sid: "1002",
    sname: "李四",
    age: 25,
    telephone: "13226765432",
    address: "西安市凤城2路100号",
    status: 3,
    checked:false,
    avatar:require('./assets/images/women.png')
  },
  {
    sid: "1003",
    sname: "王五",
    age: 24,
    telephone: "13326765431",
    address: "西安市凤城3路200号",
    status: 2,
    checked:true,
    avatar:boy
  },
];


const getStatus = (status) => {
  switch (status) {
    case 1:
      return "学习";
    case 2:
      return "毕业";
    case 3:
      return "休学";
    default:
      return "未知";
  }
};

const headeTrStyle={backgroundColor:'#ccc',color:'#000'}
const vNode1 = (
  <>
    <table className="stable">
      <thead>
        <tr style={headeTrStyle}>
          <th>序号</th>
          <th>学号</th>
          <th>头像</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>电话</th>
          <th>地址</th>
          <th>状态</th>
        </tr>
      </thead>
      <tbody>
        {students.map((item, index) => (
          <tr key={item.sid}>
            <td>
              <input type="checkbox" checked={item.checked}></input>
            </td>
            <td>{item.sid}</td>
            <td>
             <img src={item.avatar}/>
            </td>
            <td>{item.sname}</td>
            <td>{item.age}</td>
            <td>{item.telephone}</td>
            <td>{item.address}</td>
            <td>
              {getStatus(item.status)}
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  </>
);
root.render(vNode1);